<template>
  <div class="tags">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
        item.meta.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
export default {
  setup() {
    const state = reactive({
      breadList: [],
    });
    onBeforeRouteUpdate((to) => {
      if (to.matched) {
        let matched = to.matched.filter((item) => item.meta && item.meta.title);
        state.breadList = matched;
      }
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.tags {
  margin-bottom: 15px;
}
</style>